/*
 * -------------------------------
 *  메인 아이콘
 * -------------------------------
*/


/* 모바일기기 1 */
@media only screen and (max-width: 320px) {
	.colorbox-1 {
		text-align: center;
		padding: 20px;
		position: relative;
		color: #111;
	}
	.colorbox-1 span {
	  text-align: center;
	  border: 0px solid;
	  background-color: transparent;
	  -webkit-border-radius: 50%;
	  -moz-border-radius: 50%;
	  -ms-border-radius: 50%;
	  border-radius: 50%;
	  display: inline-block;
	  font-size:33px;
	}
	.colorbox-1 p{ font-size:11px; line-height: 1.5; color:#888; }
	.colorbox-1 div {
	  font-size: 14px;
	  font-weight: 700;
	  margin-bottom: 0px;
	  text-transform: uppercase;
	  font-family: 's-core-dream-regular';
	}
	.colorbox-1 .center-line {
		display: inline-block;
		width: 70px;
		height: 1px;
		border-top: 1px solid #bbb;
		margin: auto;
	}	
	.colorbox-1 span {
	  line-height: 90px;
	  text-align: center;
	  border: 0px solid;
	  background-color: transparent;
	  -webkit-border-radius: 50%;
	  -moz-border-radius: 50%;
	  -ms-border-radius: 50%;
	  border-radius: 50%;
	  display: inline-block;
	  font-size: 60px;
	  transition: transform 0.3s ease; /* 변환(회전)에 대한 트랜지션 추가 */
	}

	.colorbox-1:hover span {
	  transform: rotateY(180deg); /* 호버 시 180도 회전 */
	}

	a:hover{
		color:#333;
	}		
}

/* 모바일기기 2 */
@media only screen and (min-width: 321px) and (max-width: 768px){
	.colorbox-1 {
		text-align: center;
		padding: 20px;
		position: relative;
		color: #111;
	}
	.colorbox-1 span {
	  line-height: 2;
	  text-align: center;
	  border: 0px solid;
	  background-color: transparent;
	  -webkit-border-radius: 50%;
	  -moz-border-radius: 50%;
	  -ms-border-radius: 50%;
	  border-radius: 50%;
	  display: inline-block;
	  font-size:33px;
	}
	.colorbox-1 div {
	  font-size: 14px;
	  font-weight: 700;
	  margin-bottom: 0px;
	  text-transform: uppercase;
	}
	.colorbox-1 p {
		margin-top: 10px;
		font-size: 11px;
		line-height: 1.4;
		color:#888;
	}		
	.colorbox-1 .center-line {
		display: inline-block;
		width: 70px;
		height: 1px;
		border-top: 1px solid #bbb;
		margin: auto;
	}
	.colorbox-1 span {
	  line-height: 90px;
	  text-align: center;
	  border: 0px solid;
	  background-color: transparent;
	  -webkit-border-radius: 50%;
	  -moz-border-radius: 50%;
	  -ms-border-radius: 50%;
	  border-radius: 50%;
	  display: inline-block;
	  font-size: 60px;
	  transition: transform 0.3s ease; /* 변환(회전)에 대한 트랜지션 추가 */
	}

	.colorbox-1:hover span {
	  transform: rotateY(180deg); /* 호버 시 180도 회전 */
	}

	a:hover{
		color:#333;
	}		
}
/* 태블릿 */
@media only screen and (min-width: 769px) and (max-width: 1200px){
	.colorbox-1 {
		text-align: center;
		padding: 20px;
		position: relative;
		color: #111;
	}
	.colorbox-1 p {
		font-size: 14px;
		line-height: 1.4;
		color:#888;
	}	
	.colorbox-1 span {
	  line-height: 90px;
	  text-align: center;
	  border: 0px solid;
	  background-color: transparent;
	  -webkit-border-radius: 50%;
	  -moz-border-radius: 50%;
	  -ms-border-radius: 50%;
	  border-radius: 50%;
	  display: inline-block;
	  font-size:60px;
	}
	.colorbox-1 div {
	  font-size: 16px;
	  font-weight: 700;
	  margin-top: 20px;
	  margin-bottom: 0px;
	  text-transform: uppercase;
	}
	.colorbox-1 .center-line {
		display: inline-block;
		width: 70px;
		height: 1px;
		border-top: 1px solid #bbb;
		margin: auto;
	}		
	.colorbox-1 span {
	  line-height: 90px;
	  text-align: center;
	  border: 0px solid;
	  background-color: transparent;
	  -webkit-border-radius: 50%;
	  -moz-border-radius: 50%;
	  -ms-border-radius: 50%;
	  border-radius: 50%;
	  display: inline-block;
	  font-size: 60px;
	  transition: transform 0.3s ease; /* 변환(회전)에 대한 트랜지션 추가 */
	}

	.colorbox-1:hover span {
	  transform: rotateY(180deg); /* 호버 시 180도 회전 */
	}

	a:hover{
		color:#333;
	}		
}
/* 데스크탑 */
@media only screen and (min-width: 1201px) {
	.colorbox-1 {
		text-align: center;
		padding: 20px;
		position: relative;
		color: #111;
	}
	.colorbox-1 p {
		font-size: 14px;
		line-height: 1.4;
		color:#888;
	}	
	.colorbox-1 span {
	  line-height: 90px;
	  text-align: center;
	  border: 0px solid;
	  background-color: transparent;
	  -webkit-border-radius: 50%;
	  -moz-border-radius: 50%;
	  -ms-border-radius: 50%;
	  border-radius: 50%;
	  display: inline-block;
	  font-size:60px;

	}
	.colorbox-1 div {
	  font-size: 16px;
	  font-weight: 700;
	  margin-top: 20px;
	  margin-bottom: 0px;
	  text-transform: uppercase;
	}
	.colorbox-1 .center-line {
		display: inline-block;
		width: 70px;
		height: 1px;
		border-top: 1px solid #bbb;
		margin: auto;
	}
	.colorbox-1 span {
	  line-height: 90px;
	  text-align: center;
	  border: 0px solid;
	  background-color: transparent;
	  -webkit-border-radius: 50%;
	  -moz-border-radius: 50%;
	  -ms-border-radius: 50%;
	  border-radius: 50%;
	  display: inline-block;
	  font-size: 60px;
	  transition: transform 0.3s ease; /* 변환(회전)에 대한 트랜지션 추가 */
	}

	.colorbox-1:hover span {
	  transform: rotateY(180deg); /* 호버 시 180도 회전 */
	}

	a:hover{
		color:#333;
	}

}	





/*
 * -------------------------------
 *  입지 및 인프라
 * -------------------------------
*/

/* 모바일기기 1 */
@media only screen and (max-width: 320px) {
	.causes-desc {
		padding: 15px;
		background-color: #fff;
		height: 200px;
		font-size: 14px;
		font-weight: 500;
		color: #888;		
	}
}
/* 모바일기기 2 */
@media only screen and (min-width: 321px) and (max-width: 768px){
	.causes-desc {
		padding: 15px;
		background-color: #fff;
		height: 200px;
		font-size: 14px;
		font-weight: 500;
		color: #888;		
	}
}
/* 태블릿 */
@media only screen and (min-width: 769px) and (max-width: 1200px){
	.causes-desc {
		padding: 15px;
		background-color: #fff;
		height: 200px;
		font-size: 14px;
		font-weight: 500;
		color: #888;		
	}
}
/* 데스크탑 */
@media only screen and (min-width: 1201px) {

	.causes-desc {
		padding: 15px;
		background-color: #fff;
		height: 200px;
		font-size: 14px;
		font-weight: 500;
		color: #888;
	}

}





/*
 * -------------------------------
 *  인프라
 * -------------------------------
*/
.bg-wide {
	position: relative;
}

.bg-wide::before {
	content: "";
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background: #000;
	opacity: 0.5;
	z-index: 0;
}

/*
 * -------------------------------
 *  가격표
 * -------------------------------
*/


  table {
    font-family: Arial, sans-serif;
    border-collapse: collapse;
    width: 100%;
    margin: 20px auto;
  }

  td, th {
    border: 1px solid #ddd;
    text-align: left;
    padding: 8px;
  }

  tr:nth-child(even) {
    background-color: #f2f2f2;
  }

  th {
    background-color: #454545;
    color: white;
  }

  @media screen and (max-width: 600px) {
    th {
      display: block;
    }
    th:nth-child(odd) {
      background-color: #454545;
      color: white;
    }
    th:nth-child(even) {
      background-color: #222;
      color: white;
    }
    th, td {
      width: 100%;
      display: block;
      padding: 4px;
      text-align: left;
    }
  }